<template>
  <div class="dashborad-container">
    <!-- loading加载组件 -->
    <!-- <div class="loading" v-if="isLoading">
      <a-spin tip="加载中···" size="large" delay="500" />
    </div> -->
    <BaseLoading v-if="isLoading" delay="1000" />

    <!-- 入职时间-卡片区域 -->
    <template v-for="item in onboardingTimeData" v-if="!isLoading">
      <DataCard
        :title="item.title"
        :amount="item.amount"
        :styleData="item.styleData"
      />
    </template>

    <!-- 学历情况 - 性别比例 - 平均年龄 -->
    <template v-for="item in pieChartData" v-if="!isLoading">
      <PieChart
        :id="item.id"
        :title="item.title"
        :listData="item.listData"
        :styleData="item.styleData"
      />
    </template>

    <!-- 员工年龄分布 - 部门员工数量 -->
    <template v-for="item in barChartData" v-if="!isLoading">
      <BarChart
        :id="item.id"
        :title="item.title"
        :listData="item.listData"
        :styleData="item.styleData"
      />
    </template>

    <!-- 工龄最老10名员工列表 -->
    <OldStaffList
      v-if="!isLoading"
      :title="oldStaffListData.title"
      :oldStaffList="oldStaffListData.oldStaffList"
      :styleData="oldStaffListData.styleData"
    />

    <!-- 星座 -->
    <PieChart
      v-if="!isLoading"
      :id="constellationData.id"
      :title="constellationData.title"
      :listData="constellationData.listData"
      :styleData="constellationData.styleData"
    />
  </div>
</template>

<script setup lang="ts">
import DataCard from "@/components/data-card/index.vue";
import OldStaffList from "@/components/old-staff-list/index.vue";
import PieChart from "@/components/pie-chart/index.vue";
import BarChart from "@/components/bar-chart/index.vue";
// import ConstellationChart from "@/components/constellation-chart/index.vue";
import { storeToRefs } from "pinia";
import appStore from "@/store";

// 挂载后
onMounted(async () => {
  try {
    await appStore.useDashboradStore.getStaffAnalyseData();
  } catch (error) {
    console.log(error, "onmount");
  }
});
onUpdated(async () => {
  // console.log("更新");
  // isLoading.value = true;
  // await appStore.useDashboradStore.getStaffAnalyseData();
});

// 解构拿到员工分析数据
const { staffAnalyseData, isLoading } = storeToRefs(appStore.useDashboradStore);
// 再解构拿到-入职年份数据
const {
  onboardingTimeData,
  oldStaffListData,
  pieChartData,
  barChartData,
  constellationData
} = toRefs(staffAnalyseData.value);
console.log(barChartData, "bar");
</script>

<style lang="less" scoped>
@import "./index.less";
</style>
